<script setup lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IchipletInterface } from '../../const/ichipletInterface'
import type { submitData } from '../../const/isubmitDataInterface'
import { indexStore } from '../../store'
import store from 'element-plus/es/components/table/src/store'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const setPagetitle = ref<string>("设置")
const centerDialogVisible = ref<boolean>(false)

const setPageSubmitData = reactive<submitData>({
    mode: '',
    chiplet: '',
    pixel: 100,
    colorData: {}
})
const indexStoreData = indexStore();
const chipletList = indexStoreData.chipletList
const modeList = indexStoreData.modeList
const handleChange = () => {

}
const selectmodeChange = (val: string) => {
    console.log("val" + val)
    console.log("modevalue:")
    console.log(setPageSubmitData.mode)
}
const selectchipletChange = (val: string) => {
    console.log("val" + val)
    console.log("chipletvalue :")
    console.log(setPageSubmitData.chiplet)
}
const submitForm = (formEl: FormInstance | undefined) => {
    console.log(formEl)
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
            centerDialogVisible.value = true
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const colorset = ref<string>("#ffffff");
const colorChange = () => {

}
const closeDialog = () => {
    centerDialogVisible.value = false
}
const submitConfirm = () => {
    centerDialogVisible.value = false
    console.log(setPageSubmitData)

}
</script>
<template>
    <div class="setpage-form">
        <el-form label-position="left" label-width="100px" :model="setPageSubmitData" ref="formRef">

            <el-form-item label="芯片：" prop="chiplet" :rules="[
                { required: true, message: '请选择芯片' },
            ]">
                <el-select v-model="setPageSubmitData.chiplet" :multiple="false" :default-first-option="true" filterable
                    allow-create placeholder="芯片设置" @change="selectchipletChange">
                    <el-option v-for="item in chipletList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="模式：" prop="mode" :rules="[
                { required: true, message: '请选择模式' },
            ]">
                <el-select v-model="setPageSubmitData.mode" :multiple="false" :default-first-option="true" filterable
                    allow-create placeholder="模式设置" @change="selectmodeChange">
                    <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="像素点：" prop="pixel" :rules="[
                { required: true, message: '请填写像素点' },
            ]">
                <el-input-number v-model="setPageSubmitData.pixel" :min="1" @change="handleChange" />

            </el-form-item>
            <el-form-item v-if="setPageSubmitData.mode == '0'" label="颜色：">
                <el-color-picker color-format="rgb" v-model="colorset" @change="colorChange" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="centerDialogVisible" :title="setPagetitle" width="30%" align-center @close="closeDialog">
        <span>确认是否提交修改内容？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="submitConfirm">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.setpage-form {
    margin: 0 auto;


}
</style>